<script setup lang="ts">
import type { AnimationAction, AnimationMixer, Group } from "three";
import { AnimationClip, BooleanKeyframeTrack, Color, KeyframeTrack, LoopOnce, MeshBasicMaterial } from "three";
import type { ShallowReactive } from "vue";

const material = new MeshBasicMaterial({
  color: "white",
});

const size = {
  lineWidth: 0.15,
  width: 2.4,
  height: 5.4,
};

const { value } = useControls({
  拿命来: true,
});

watch(value, val => {
  console.log(val);
  material.color = new Color(val ? "red" : "blue");
});

const { value: charging } = useControls({
  充电中: true,
});

const carRef = ref<Group>();

const outClip = new AnimationClip("out", 1, [
  new KeyframeTrack("car.position", [0, 1], [0, 0, 0, 0, 0, size.height]),
  new BooleanKeyframeTrack("car.visible", [0, 1], [true, false]),

]);

const inClip = new AnimationClip("in", 1, [new KeyframeTrack("car.position", [0, 1], [0, 0, size.height, 0, 0, 0])]);

let actions: ShallowReactive<{
  [key: string]: AnimationAction;
}>;
let mixer: AnimationMixer;
onMounted(() => {
  const a = useAnimations([outClip, inClip], carRef);
  actions = a.actions;
  mixer = a.mixer;

  actions.out.loop = LoopOnce;
  actions.out.clampWhenFinished = true;

  actions.in.loop = LoopOnce;
  actions.in.clampWhenFinished = true;
});

watch(charging, val => {
  if (!carRef.value)
    return;

  mixer.stopAllAction();
  if (val) {
    // actions.in.reset();
    actions.in.play();
  }
  else {
    // actions.out.reset();
    actions.out.play();
  }
});

// const fontPath = "https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json";
</script>

<template>
  <TresGroup :position="[0, 1, 0]">
    <TresMesh :rotate-x="Math.PI / -2" :position="[size.width / 2 - size.lineWidth / 2, 0, 0]" :material="material">
      <TresPlaneGeometry :args="[size.lineWidth, size.height]" />
    </TresMesh>

    <TresMesh :rotate-x="Math.PI / -2" :position="[size.width / -2 - size.lineWidth / -2, 0, 0]" :material="material">
      <TresPlaneGeometry :args="[size.lineWidth, size.height]" />
    </TresMesh>

    <TresMesh :rotate-x="Math.PI / -2" :position="[0, 0, size.height / -2 - size.lineWidth / -2]" :material="material">
      <TresPlaneGeometry :args="[size.width, size.lineWidth]" />
    </TresMesh>

    <TresMesh
      :rotate-x="Math.PI / -2"
      :position="[size.width / 3, 0, size.height / 2 - size.lineWidth / 2]"
      :material="material"
    >
      <TresPlaneGeometry :args="[size.width / 3, size.lineWidth]" />
    </TresMesh>

    <TresMesh
      :rotate-x="Math.PI / -2"
      :position="[size.width / -3, 0, size.height / 2 - size.lineWidth / 2]"
      :material="material"
    >
      <TresPlaneGeometry :args="[size.width / 3, size.lineWidth]" />
    </TresMesh>
    <!--
    <TresGroup :scale="0.02">
      <Suspense>
        <FBXModel path="/汽车.fbx" />
      </Suspense>
    </TresGroup> -->

    <TresGroup ref="carRef" :scale="0.005" name="car">
      <Suspense>
        <FBXModel path="/car1.fbx" />
      </Suspense>
    </TresGroup>
  </TresGroup>
</template>

<style lang="less" scoped></style>
